@namespace url("http://www.w3.org/1999/xhtml");
@namespace ui url("http://www.w3.org/1999/xhtml");

/*
 * Note that splitboxes and splitpanels have additional styles  
 * for IE on the MAIN STAGE! See "app.css" and "stagedeck.css".
 */
ui|splitbox {
	height: 100%;
	display: block;
	position: relative;
	overflow: hidden;
}
ui|splitbox.maximized,
ui|splitpanel.maximized { /* used for stage stuff */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
ui|splitpanel {
	display: block;
	position: relative;
	overflow: hidden;
}
ui|splitpanel.horizontal {
	float: left;
}
ui|splitpanel.maximized {
	float: none !important;	
}
ui|splitter {
	display: block;
	z-index: 2;
	#ie font-size: 1px; /* cannot use overflow:hidden hack for IE6 */
	position: relative;
	background-color: $(color:threedface);
	color: $(color:threedface); /* moz appends a text node inside the splitter */
}
ui|splitter.active {
	z-index: 23; /* float to top while dragging */
}
ui|splitter.horizontal {
	height: 100%;
	width: 8px;
	float: left;
	border-right: 1px solid $(color:threedhighlight);
	border-left: 1px solid $(color:threeddarkshadow);
}
ui|splitter.vertical {
	height: 8px;
	width: 100%;
	border-bottom: 1px solid $(color:threedhighlight);
	border-top: 1px solid $(color:threeddarkshadow);
}
ui|splitterbody {
	display: block;
	position: absolute;	
	background-color: $(color:threedface);
}
ui|splitter.horizontal ui|splitterbody {
	width: 8px;
	height: 100%;
	margin-left: -1px;
	cursor: e-resize;
	border-left: 1px solid $(color:threedhighlight);
	border-right: 1px solid $(color:threeddarkshadow);
}
ui|splitter.horizontal ui|splitterbody.hover,
ui|splitter.horizontal ui|splitterbody.active {
	-vendor-box-shadow: 2px 0 3px rgba(0,0,0,0.35);
}
ui|splitter.vertical ui|splitterbody {
	height: 8px;
	width: 100%;
	cursor: n-resize;
	margin-top: -1px;
	border-top: 1px solid $(color:threedhighlight);
	border-bottom: 1px solid $(color:threeddarkshadow);
}
ui|splitter.vertical ui|splitterbody.hover,
ui|splitter.vertical ui|splitterbody.active {
	-vendor-box-shadow: 0 2px 3px rgba(0,0,0,0.35);
}